<template>
  <div class="footer-container">
    <div class="top-header" v-for="(item, index) in items" :key="index">
      <img :src="item.url" alt="">
      <span>{{ item.text }}</span>
    </div>

  </div>
</template>

<script setup>
import f_img1 from '@/assets/imgs/footer/f_img1.png'
// 可以继续导入其他图片
// import f_img2 from '@/assets/imgs/footer/f_img2.png'

const items = [
  { url: f_img1, text: '品类齐全,轻松购物' },
  { url: f_img1, text: '品类齐全,轻松购物' },
  { url: f_img1, text: '品类齐全,轻松购物' },
  { url: f_img1, text: '品类齐全,轻松购物' },

]
</script>

<style scoped lang="scss">
.footer-container {
  padding: 30px;
  display: flex; // 添加flex布局使多个项目横向排列
  justify-content: space-around; // 均匀分布
  flex-wrap: wrap; // 允许换行
border-bottom: 1px solid #767474;
  .top-header {
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 10px;
    min-width: 120px; // 最小宽度


    img {
      width: 40px; 
      height: 40px;
      margin-bottom: 5px;
    }

    span {
      font-size: 14px;
      color: #666;
      text-align: center;
    }
  }
}
</style>
